<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <button id="reset">重新开始一轮游戏</button><br/>
    <span>请输入要猜的数字</span> <input type="text" name="guessNumber" id="guessNumber"><button id="guess">猜</button><br>
    <span>已经猜的次数:</span> <span id="count"></span><br>
    <span>结果:</span> <span id="result"></span>
    <!-- 加 span 的原因:起到定位的作用,方便后续操作 -->

    <script src="jquery.min.js"></script>
    <script>
        //生成随机数
        //这里生成的是,第一次打开页面的随机数
        var num = Math.floor(Math.random()*100)+1//随机数可能是小数,所以向下取整再+1 --> 1~100
        console.log(num);
        var count =0;

        $(document).ready(function(){
            $("#guess").click(function(){
                var guessnum =  $("#guessNumber").val();//获取表单输入的值
                //val 表单有值的时候是取值(定义一个对象,将值取给给对象),没有值的时候是赋值(将""中的值赋值给表单)
                count++;
                $("#count").text(count);
                if(guessnum>num){
                    //猜大了
                    $("#result").text("猜大了!");
                    $("#result").css("color","red");
                }else if(guessnum<num){
                    //猜小了
                    $("#result").text("猜小了!");
                    $("#result").css("color","red");
                }else{
                    $("#result").text("猜对了!");
                    $("#result").css("color","green");
                }
            });

            //这里生成的是后续点击 重新开始 之后生成的随机数
            $("#reset").click(function(){
                num = Math.floor(Math.random()*100)+1;
                console.log(num);
                count = 0;
                $("#guessNumber").val("");//表单赋值 --> 赋值是将 "" 中的值赋值给表单 
                $("#count").text(count);//count 赋值为0
                $("#result").text("");//清空文本
            });
        });
    </script>
</body>
</html>